<template>
<div>
  <h1>该训练元信息</h1>
  <table :class="$options._componentTag" v-if="show">
  <thead>
  <tr>
    <th>TrainId</th>
    <th>CountEpoch</th>
    <th>Decay</th>
    <th>ImageHeight</th>
    <th>LearningRate</th>
    <th>E-ACCImage</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>{{msg.train_data.id }}</td>
    <td>{{msg.train_data.count_epoch}}</td>
    <td>{{msg.train_data.decay}}</td>
    <td>{{msg.train_data.image_height}}</td>
    <td>{{msg.train_data.learning_rate}}</td>
    <td>
      <img :src="'http://localhost:5000/static/'+msg.train_data.epoch_acc_img_name
" alt=" ">
    </td>
  </tr>
  </tbody>
  </table>
  <p>
  <h1>模型性能历史</h1>
  <table :class="$options._componentTag" v-if="show">
  <thead>
  <tr>
    <th>accuracy</th>
    <th>precision</th>
    <th>auc</th>
    <th>epoch</th>
    <th>f1</th>
    <th>fnr</th>
    <th>fpr</th>
    <th>tnr</th>
    <th>tpr</th>
    <th>ks</th>
    <th>pr_img</th>
    <th>roc_img</th>
  </tr>
  </thead>
  <tbody>

  <tr v-for="row in msg.evaluations">
    <td>{{row.accuracy_score.toString().substring(0,5)}}</td>
    <td>{{row.precision_score.toString().substring(0,5)}}</td>
    <td>{{row.precision_score.toString().substring(0,5)}}</td>
    <td>{{row.epoch}}</td>
    <td>{{row.f1_score.toString().substring(0,5)}}</td>
    <td>{{row.fnr.toString().substring(0,5)}}</td>
    <td>{{row.fpr.toString().substring(0,5)}}</td>
    <td>{{row.tnr.toString().substring(0,5)}}</td>
    <td>{{row.tpr.toString().substring(0,5)}}</td>
    <td>{{row.ks.toString().substring(0,5)}}</td>
    <td>
      <img :src= "'http://localhost:5000/static/'+row.pr_img_name" :alt="1">
    </td>
    <td>
      <img :src= "'http://localhost:5000/static/'+row.roc_img_name" :alt="1">
    </td>
  </tr>

  </tbody>
  </table>
  <h1>模型结构</h1>
  <table :class="$options._componentTag" v-if="show">
  <thead>
  <tr>
    <th>name</th>
    <th>var1</th>
    <th>var2</th>
    <th>var3</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="row in msg.model_describe">

    <td>{{row[0]}}</td>
    <td>{{row[1]}}</td>
    <td>{{row[2]}}</td>
    <td>{{row[3]}}</td>
  </tr>
  </tbody>
  </table>
</div>
</template>

<script>
import axios from "axios";

export default {
  name: "TrainView",
  data: function data() {
        return {
          train_id : this.$route.params.trainId,
          msg:{},
          show: false
        };
    },
  methods:{
    getTrainList() {
      const path = 'http://localhost:5000/train/'+this.train_id;
      axios.get(path)
        .then((res) => {
          this.msg = res.data;
          console.log(this.msg)
          this.show = true
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });

    },
  },
  created() {
    this.getTrainList()
  },
}
</script>

<style scoped>
@import "../../public/style.css";
img {
  width: 240px;
}
</style>